<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/css/changelists.css" />
<link rel="stylesheet" type="text/css" href="/static/css/dashboard.css" />
<link rel="stylesheet" type="text/css" href="/static/css/forms.css" />
<title>변화량</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
	
</script>
<script content="text/html; charset=utf-8">
	var tableToExcel = (function() {
		var uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function(
				s) {
			return window.btoa(unescape(encodeURIComponent(s)))
		}, format = function(s, c) {
			return s.replace(/{(\w+)}/g, function(m, p) {
				return c[p];
			})
		}
		return function(table, name, filename) {
			if (!table.nodeType)
				table = document.getElementById(table)
			var ctx = {
				worksheet : name || 'Worksheet',
				table : table.innerHTML
			}

			document.getElementById("dlink").href = uri
					+ base64(format(template, ctx));
			document.getElementById("dlink").download = filename;
			document.getElementById("dlink").click();

		}
	})()
</script>
<script type="text/javascript">
	$(function() {
		var stampNames = JSON.parse("{{stampNames}}");
		var counts = JSON.parse("{{counts}}");
		$('#container').highcharts({
			title : {
				text : '{{name}} ',
			},
			xAxis : {
				title : {
					text : '타임라인'
				},
				categories : stampNames
			},
			yAxis : {
				title : {
					text : '수량'
				},
				plotLines : [ {
					value : 0,
					width : 1,
					color : '#808080'
				} ]
			},
			legend : {
				layout : 'vertical',
				align : 'right',
				verticalAlign : 'middle',
				borderWidth : 3
			},
			series : [ {
				name : '수량',
				data : counts
			}, ]
		});
	});
</script>
</head>
<body style="margin: 30px;">
  <script src="/static/js/highcharts.js">
			
		</script>
  <script src="/static/js/exporting.js">
			
		</script>
  <!-- Content -->
  <div id="content1" class="flex">
    <form id="curve-form" action="" method="post">
      <div>
        <div>
          <h3>[ {{name}} ]</h3>
          <a href="/cs/statistics/?name={{name}}&term=hourly&delta=0&fields={{fields}}"><img src="/static/img/hourlybtn.png" /></a> <a href="/cs/statistics/?name={{name}}&term=daily&delta=0&fields={{fields}}"><img src="/static/img/dailybtn.png" /></a> <a href="/cs/statistics/?name={{name}}&term=weekly&delta=0&fields={{fields}}"><img src="/static/img/weeklybtn.png" /></a>
        </div>
        <br /> <b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="/cs/statistics/?name={{name}}&term={{term}}&delta={{delta-1}}&fields={{fields}}"><img src="/static/img/prev1.png" /></a>{{stampTitle}} {% if delta<0 %}<a href="/cs/statistics/?name={{name}}&term={{term}}&delta={{delta+1}}&fields={{fields}}"><img src="/static/img/next1.png" /></a> {% endif %}
        </b> <br />
      </div>
      {% if term=='hourly' %} {% if timezone=='1' %}
      <div style="text-align: right; margin-right: 30px;">
        <a href="/cs/statistics/?name={{name}}&term={{term}}&delta={{delta}}&fields={{fields}}&timezone=0">San Francisco</a>
      </div>
      {% else %}
      <div style="text-align: right; margin-right: 30px;">
        <a href="/cs/statistics/?name={{name}}&term={{term}}&delta={{delta}}&fields={{fields}}&timezone=1">Asia/Seoul</a>
      </div>
      {% endif %} {% endif %}
      <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
  </div>
  <!-- END Content -->
  <a id="dlink" style="display: none;"></a> &nbsp;&nbsp;&nbsp;&nbsp;
  <img src="/static/img/exportbtn.png" onclick="tableToExcel('exportTable', '{{term}}', '{{name}}.xls')" style="cursor: pointer;" />
  <table id="exportTable" style="display: none;">
    <tr>
      <th colspan="2">{{name}} {{stampTitle}}</th>
    </tr>
    <tr>
      <th>기간</th>
      <th>수량</th>
    </tr>
    {% for i in range(stampNames|length) %} {% if term=='weekly' %}
    <tr>
      <td>{{stampNames[i]}}주</td>
      <td>{{counts[i]}}</td>
    </tr>
    {% endif %} {% if term=='hourly' %}
    <tr>
      <td>{{stampNames[i]}}시</td>
      <td>{{counts[i]}}</td>
    </tr>
    {% endif %} {% if term=='daily' %}
    <tr>
      <td>{{stampNames[i]}}일</td>
      <td>{{counts[i]}}</td>
    </tr>
    {% endif %} {% endfor %}
  </table>
  </form>
  </div>
</body>
</html>
